<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 抓住div元素  心主体 */
			div{
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				/* 自适应居中 */
				margin: 300px auto;
				/* 旋转 */
				transform: rotate(135deg);
				/* 透明度属性：属性值0~1*/
				opacity: .8;
				/* 滤镜属性：光晕：下阴影
				 drop-shadow(x值 y值 模糊范围 模糊颜色)*/
				 
				 
				 filter: drop-shadow(0 0 100px #e4393c);
				 /* 动画属性：关键帧名称 过度时间 过渡方式无线循环 */
				 animation: heart .8s linear infinite;
			}
			/* 伪类选择器： 给元素附加上效果的选择器
			    语法：div：hover{}  当鼠标悬停到div上实现的样式效果
				需求：鼠标悬停到中间心位置改成圆
				选择器：before 在元素之前添加文本，通常与content""
				选择器：after 在元素之后添加文本，通常与content:""
				
			   /* 伪类选择器div上方增加文本/画圆*/
				div:before{
					content:"";/* 行转块 */
					/* 显示属性 
					display: block;转成块级元素
					display: inline;转城行级元素
					display: none;元素消失*/
					display:block;
					width: 200px;
					height: 200px;
					background-color: #e4393c;
					border-radius: 50%;
					/* 相对定位 */
					position: relative;
					left: -100px;
				}
				div:after{
					content: "";/* 行转块 */
					display: block;
					width: 200px;
					height: 200px;
					background-color: #e4393c ;
					border-radius: 50%;
					position: relative;
					top:-100px
					
					
					
				}
				/* 动画 */
				/* 1.创建关键帧--手翻书 */
				@keyframes heart {
					/* 3个画面：a.等比例出现，防止跳帧吧b.缩小比例从c.放大比例 */
					0%{
						/* 转换属性：缩放属性 1.表示
						等比例 .8表示缩小0.8倍
						 1.2表示放大1.2倍
						 transform转换复合属性：旋转 缩放*/ 
						 transform: rotate(135deg) scale(1);
						 
					}
					30%{transform: rotate(135deg)scale(.8);
					}
					100%{transform: rotate(135deg)scale(1.2);
					}
					
				}
		</style>
	</head>
	<body>
		<!-- 画一颗心  HTML1个元素-->
		<div></div>
		<audio src="renxi.mp3" autoplay loop></audio>
		<!-- html5：元素的分类，按照元素的特点分为：
		            块元素：可以设置高宽
					行元素：不可以设置高宽，可以在一行内显示，典型行元素：span
					文本内容属于行元素
					行内块元素：可以设置高宽，可以一行内显示 典型行内元素：img
					
					-->
	</body>
</html>